<template>
  <section class="component run-record-of-the-day">
    <data-form :model="model" :page="pageService" @handleResetForm="resetData" @onSearch="refreshData">
      <template slot="inputs">
        <el-form-item label="订单编号" prop="caseNumber">
          <el-input v-model="model.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalInfoPersonalName">
          <el-input v-model="model.personalInfoPersonalName"></el-input>
        </el-form-item>
        <el-form-item label="机构" prop="deptName">
          <el-input v-model="model.deptName"></el-input>
        </el-form-item>
        <el-form-item label="催收员" prop="caseInfoRecordCurrentCollectorRealName">
          <el-input v-model="model.caseInfoRecordCurrentCollectorRealName"></el-input>
        </el-form-item>
      </template>
    </data-form>
    <data-box :data="dataSet" :page="pageService" @onPageChange="refreshData">
      <template slot="columns">
        <el-table-column :formatter="row => $filter.dictConvert(row.runningType,'RunningType')" :min-width="$helper.getColumnWidth(4)" label="运行类型" prop="runningType"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="是否命中" prop="matched"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(8)" label="订单编号" prop="caseNumber"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="客户姓名" prop="personalName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="产品名称" prop="productName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="催收总金额" prop="overdueAmount"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="逾期期数" prop="overduePeriod"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="机构" prop="deptName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="催收员" prop="currentCollectorName"></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="close()">关闭</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import { Vue, Component, Emit, Prop, Watch } from "vue-property-decorator";
import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { LabelingStrategyService } from "~/services/dataimp-service/labeling-strategy-service";

@Component
export default class RunRecordOfTheDay extends Vue {
  @Dependencies(LabelingStrategyService)
  private labelingStrategyService: LabelingStrategyService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;

  @Prop()
  private batchNumber: string;
  @Prop()
  private labelId: string;

  private model: any = {
    caseInfoRecordCurrentCollectorRealName: "", //催收员
    caseNumber: "", // 借据号
    deptName: "", // 机构
    personalInfoPersonalName: "", // 客户姓名
    latelyDatetime: [],
    batchNumber: "",
    labelId: ""
  };

  private dataSet: any = [];

  // @Watch("batchNumber")
  // private onBatchNumberChange(val) {
  //   this.dataSet = [];
  //   this.pageService.reset();
  //   this.refreshData();
  // }
  // @Watch("labelId")
  // private onLabelIdChange(val) {
  //   this.dataSet = [];
  //   this.pageService.reset();
  //   this.refreshData();
  // }

  @Emit("close") private close() {
    this.resetData();
  }

  private resetData() {
    this.model.caseNumber = "";
    this.model.labelId = "";
    this.model.deptName = "";
    this.model.latelyDatetime = [];
    this.model.personalInfoPersonalName = "";
    this.model.caseInfoRecordCurrentCollectorRealName = "";
  }

  private mounted() {
    this.refreshData();
  }

  private refreshData() {
    this.model.batchNumber = this.batchNumber;
    this.model.labelId = this.labelId;
    this.labelingStrategyService
      .queryLabelDetailData(this.model, this.pageService)
      .subscribe(data => {
        this.dataSet = data;
      });
  }
}
</script>

<style lang="less" scoped>
</style>
